<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/WEB-INF/jspf/common-imports.jspf" %>
<title>상품리스트</title>

	<script type="text/javascript">
		function initEventHandler() {
			$("#btn_list_search").click(function () {
				doList();
			});
			
			// 등록화면 호출
			$("#btn_list_save").click(function(){
//				getTagList();
//				getOptList();
				$("#cid_save_panel").show();
				$("#cid_list_panel").hide();
			});
			
			// 파일업로드
			$("#btn_save_fileupload").click(function() {
				doFileUpload();
			});
			
			// 상품등록
			$("#btn_reg_save").click(function() {
				doSave();
			});
		}
		
		/** 조회 **/
		function doList() {
			$.invokeGET(
					"/rest/PRODUCT/list",
					$("#listFrm"),
					function(model) {
						var html = "";
						var data = model.MODEL;
						
						if (data.length > 0 ) {
							$("#cid_list > tbody").html('');
							for (var i = 0; i < data.length; i++) {
								html = "";
								
								html += "<tr onclick='javascript:doView(\""+data[i].seq+"\")'>";
								html +="	<td style=\"text-align:center\" width=\"60px\">"+data[i].seq+"</td>";
								html +="	<td align='center'>"+data[i].product_name+"</td>";
								html +="	<td style=\"text-align:center\" width=\"100px\">"+data[i].price+"</td>";
								html +="	<td style=\"text-align:center\" width=\"60px\">"+data[i].product_cnt+"</td>";
								html +="	<td style=\"text-align:center\" width=\"60px\">"+data[i].event_yn+"</td>";
								html +="	<td style=\"text-align:center\" width=\"60px\">"+data[i].popular_yn+"</td>";
								html +="	<td style=\"text-align:center\" width=\"60px\">"+data[i].recomm_yn+"</td>";
								html +="	<td style=\"text-align:center\" width=\"80px\">"+data[i].reg_dt.toDate().format("yyyy-MM-dd", "date")+"</td>";
								html +="</tr>";
								
								$("#cid_list > tbody").append(html);
							}
							
						} else {
							$("#cid_list > tbody").html('');
							html = "";
							
							html += "<tr>";
							html +="	<td colspan='8'>상품이없습니다.</td>";
							html +="</tr>";							
							$("#cid_list > tbody").html(html);
						}
						
						makePagingControl(
								$("#cid_pageing"),
								$("#page_no").val(),
								model.TOTAL_PAGE_COUNT,
								5, 
								function(p) {
									$("#page_no").val(p);
									doList();
								}
							);
					}
			);
		}
		
		function doView() {
			
		}
		function doDetail() {
			
		}
		function doUpdate() {
			
		}
		
		function doSave() {
			$.invokePOST(
				"/rest/PRODUCT/add",
				$("#saveFrm"),
				function(model) {
				}				
				
			);
			// 본문등록
			// 이미지정보 등록
			// 옵션등록
			// 태그등록
		}
		
		/** 이미지 업로드 **/
		function doFileUpload() {
			 var option = {
		        url :"/file",
		        type : "POST",
		        dataType : "json",
		        contentType : "application/json",
		        success: function(data) {
		        	if (data.file_size != "" || data.file_size > 0) {
		        		var html = "";
		        		
		        		html += "<tr>";
		        		html += "	<td><img src='"+data.file_path+"' width='30px', height='30px' /></td>";
		        		html += "	<td>"+data.file_name+"</td>";
		        		html += "	<td>"+data.file_size+"</td>";
		        		html += "	<td>"+data.file_reg_dt+"</td>";
		        		html += "	<td>[삭제]<input type='text' name='img_path'  value='"+data.file_path+"'/></td>";
		        		html += "</tr>";
		        		
					$("#cid_reg_img > tbody").append(html);
		        	}
		        }
			 };
			$('#fileFrm').ajaxSubmit(option); 
			
		}
		
		/* 태그리스트 조회*/
		function getTagList() {
			$.invokePOST(
					"/rest/PRODUCT/tag/list",
					null,
					function(model) {
						var html = "";
						var data = model.MODEL;
						if (data.length > 0 ) {
							$("#cid_reg_tag #reg_tag_item").html('');
							for (var i = 0; i < data.length; i++) {
								html = "";
								
								html += "<option value=\""+data[i].tag_name+"\">"+data[i].tag_name+"</option>";
								$("#cid_reg_tag #reg_tag_item").append(html);
							}
							
						} else {
							alert("조회 내용 읍음");
						}
					}
			);			
		}
		
		function addTag() {
			
			
			var itemWidth = $("#reg_tag_item").width() + 2;
			var html = "";
			html = "";
			html += "<div class=\"controls\" style=\"padding-top:5px\">";
			html += "<label style=\"width:"+itemWidth+"px\">"+$("#reg_tag_item").val()+"</label><input type='hidden' name='tag_name' value='"+$("#reg_tag_item").val()+"'/>";
			html += "	<a class=\"btn btn-small btn-primary\" href=\"javascript:delTag\">삭제</a>";				
			html += "</div>";
			
			$("#cid_reg_tag").append(html);
		}

		
		/* 옵션 조회 */
		function getOptList() {
			$.invokePOST(
					"/rest/PRODUCT/opt/master/list",
					null,
					function(model) {
						var html = "";
						var data = model.MODEL;
						if (data.length > 0 ) {
							$("#cid_reg_option #reg_opt").html('');
							for (var i = 0; i < data.length; i++) {
								html = "";
								html += "<option value=\""+data[i].seq+"\">"+data[i].opt_title+"</option>";
								$("#cid_reg_option #reg_opt").append(html);
							}
							
						} else {
							html = "";
							html += "<option value=''>선택할 옵션이 없습니다.</option>";
							$("#cid_reg_option #reg_opt").append(html);

						}
					}
			);			
		}

		function addOpt() {
			
			var html = "";
			html = "";
			html += "<div class=\"controls\">";
			html += "옵션 : " + $("#reg_opt > option:selected").text()+"<br/>";
			html += "내용 : <input type=\"text\" name=\"opt_desc\" id=\"opt_desc\" value=\"\"/>&nbsp;";
			html += "<a class=\"btn btn-small btn-primary\" href=\"javascript:addOpt()\">삭제</a>";
			html += "<input type=\"hidden\" name=\"opt_master_seq\" id=\"opt_master_seq\" value=\""+$("#reg_opt").val()+" \"/>";
			html += "</div>";
			
			$("#cid_reg_option").append(html);
		}
		
		$(document).ready(function () {
			doList();
			initEventHandler();
			
		});
		
		
		function doTest() {
			$.invokePOST(
				"/rest/PRODUCT/",
				$("#saveFrm"),
				function(model) {
				}				
				
			);
			// 본문등록
			// 이미지정보 등록
			// 옵션등록
			// 태그등록
		}
	</script>
</head>
<body>
	<form id="emptyFrm" name="emptyFrm"></form>
	<!-- =============================================== menu 시작 -->
	<%@ include file="/WEB-INF/jspf/menu_header-imports.jsp" %>
	<%@ include file="/WEB-INF/jspf/menu_left-imports.jsp" %>
	<!-- =============================================== menu 끝 -->
	
	<!-- =============================================== content 시작 -->
	
	<!-- 조회화면 시작 -->
	<div id="cid_list_panel">
		<form id="listFrm" id="listFrm">
		<!-- 검색 시작 -->
		<div>
			<select name="src_type" id="src_type">
				<option value="">전체</option>
				<option value="">상품명</option>
				<option value="">태그</option>
				<option value="">옵션</option>
				<option value="">이벤트상품</option>
				<option value="">추천상품</option>
				<option value="">인기상품</option>
			</select> 
			<input type="text" name="src_keyword" id="src_keyword" value=""/>
			<a class="btn btn-small btn-primary" id="btn_search" href="javascript:doList()">
				<i class="icon-search"></i>
				검색
			</a>
					
		</div>
		<!-- 검색 끝 -->
	
		<!-- 버튼 시작 -->
		<div style="text-align:right">
			<a class="btn btn-small btn-primary" id="btn_list_save" href="#">
				<i class="icon-search"></i>
				등록
			</a>
			<a class="btn btn-small btn-primary" id="btn_list_del" href="#">
				<i class="icon-delete"></i>
				삭제
			</a>
		</div>
		<!-- 버튼 끝 -->
		<br/>
		<!-- 리스트 시작 -->
		<table id="cid_list" class="table table-striped table-bordered table-condensed" >
			<thead>
			<tr>
				<th style="text-align:center">번호</th>
				<th style="text-align:center">상품명</th>
				<th style="text-align:center">금액</th>
				<th style="text-align:center">재고수량</th>
				<th style="text-align:center">이벤트</th>
				<th style="text-align:center">인기</th>
				<th style="text-align:center">추천</th>
				<th style="text-align:center">등록일</th>
			</tr>
			</thead>
			
			<tbody></tbody>
			
			<tfoot>
			<tr>
				<th style="text-align:center" colspan="8" id="cid_pageing"></th>
			</tr>
			</tfoot>
		</table>
		<input type="hidden" id="page_no" name="page_no" value="1"/>
		</form>
	</div>
	<!-- 리스트 끝 -->
	
	<!-- 등록 페이지 시작 -->
	<div id="cid_save_panel" style="display:none">
		<form name="saveFrm" id="saveFrm" class="form-inline form-horizontal">
		
		<fieldset>
			<legend>상품등록</legend>
			
			<div class="control-group">
				<label class="control-label" for="focusedInput">상품명</label>
				<div class="controls">
					<input type="text" name="product_name" id="product_name" value=""/>
				</div>				
			</div>
			
			<div class="control-group">
				<label class="control-label" for="focusedInput">상품설명</label>
				<div class="controls">
					<textarea name="product_desc" id="product_desc"></textarea>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label" for="focusedInput">금액</label>
				<div class="controls">
					<input type="text" name="price" id="price" value="0"/> (원)
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label" for="focusedInput">수량</label>
				<div class="controls">
					<input type="text" name="product_cnt" id="product_cnt" value="0"/> (개)
				</div>				
			</div>
			
			<div class="control-group">
				<label class="control-label" for="focusedInput">상품상태</label>
				<div class="controls">
					<input type="checkbox" name="event_yn" id="event_yn" value="Y"/>이벤트상품
					<input type="checkbox" name="recomm_yn" id="recomm_yn" value="Y"/>추천상품
					<input type="checkbox" name="popular_yn" id="popular_yn" value="Y"/>인기상품
				</div>				
			</div>
	
			<div class="control-group" id="cid_reg_tag">
				<label class="control-label" for="focusedInput">카테고리(태그)</label>
				<div class="controls">
					<select id="reg_tag_item"></select>
					<a class="btn btn-small btn-primary" href="javascript:addTag()">추가</a>				
				</div>
			</div>

			<div class="control-group" id="cid_reg_option">
				<label class="control-label" for="focusedInput">옵션</label>
				<div class="controls">
					<select id="reg_opt"></select>
					<a class="btn btn-small btn-primary" href="javascript:addOpt()">추가</a>				
				</div>
			</div>
			
		</fieldset>		

		<table width="100%" border="1" cellpadding="0" cellspacing="0" id="cid_reg_img">
			<thead>
			<tr>
				<td>섬네일</td>
				<td>파일명</td>
				<td>용량</td>
				<td>등록일</td>
				<td>기능</td>
			</tr>	
			</thead>
			<tbody>
			</tbody>
		</table>				
		
		<table>
			<tr>
				<td>
					<input type="radio" name="use_yn" id="use_yn_Y" value="Y" checked="checked">사용함
					<input type="radio" name="use_yn" id="use_yn_N" value="N">사용안함 
				</td>
			</tr>
		</table>
		<input type="hidden" name="product_hash" id="product_hash" value=""/>
		
		</form>
		
		<form name="fileFrm" id="fileFrm" enctype="multipart/form-data" method="post" action="/file">
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th>이미지</th>
				<td colspan="4">
					<input type="file" name="fileData" id="fileData" value=""/>
					<input type="hidden" name="name" id="name" value='test.png'/>
					<input type="hidden" name="size" id="size" value="10303030"/>
					<a href="#" id="btn_save_fileupload">[파일업로드]</a>
				</td>
			</tr>
			</thead>			
			<tfoot>
				<tr>
					<td colspan="5" align="center">
						[닫기]
						<a href="#" id="btn_reg_save">[상품등록]</a>
					</td>
				</tr>
			</tfoot>			
		</table>
		</form>
		
	</div>	
	<!-- 등록 페이지 끝 -->
	
	<!-- 상세 페이지 시작 -->
	<div id="cid_area_view" style="display:none">
		<form id="cid_view_frm">
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<caption>상품정보 등록</caption>
			<tbody>
			<tr>
				<th>상품명</th>
				<td>상품명....ㄴ어ㅏ럼나어리먼ㅇ리ㅓ</td>
			</tr>
			<tr>
				<th>상품설명</th>
				<td>상품설명 머이러밍널 살ㅇ품설명 상품설머아ㅣㅓㄹㅁ넝리멍리</td>
			</tr>
			<tr>
				<th>금액</th>
				<td>1000000 (원)</td>
			</tr>
			<tr>
				<th>수량</th>
				<td>1123123 (개)</td>
			</tr>		
			<tr>
				<th>상품상태</th>
				<td>
					이벤트상품
					추천상품
					인기상품
				</td>
			</tr>
			</tbody>
		</table>
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<td>섬네일</td>
				<td>파일명</td>
				<td>용량</td>
				<td>등록일</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td><img src="" width="30px" height="30px"/></td>
				<td>dkdkdkdkddk Test.jsp</td>
				<td>xxxxx</td>
				<td>xxxx-xx-xx</td>
			</tr>
			</tbody>
		</table>
<!-- 		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th>태그명</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>태그1</td>
			</tr>
			</tbody>
		</table>	 -->
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th>옵션</th>
				<th>내용</th>
			</tr>
			</thead>
			<tbody>
			
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="center">
						[닫기]
						[수정]
					</td>
				</tr>
			</tfoot>
		</table>	
		</form>
	</div>
	<!-- 상세 페이지 끝 -->
	
	<!-- 수정 페이지 시작 -->
	<div id="cid_area_detail" style="display:none">
		<form id="cid_detail_frm">
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<caption>상품정보 수정</caption>
			<tbody>
			<tr>
				<th>상품명</th>
				<td><input type="text" name="" id="" value=""/></td>
			</tr>
			<tr>
				<th>상품설명</th>
				<td><textarea></textarea></td>
			</tr>
			<tr>
				<th>금액</th>
				<td><input type="text" name="" id="" value=""/></td>
			</tr>
			<tr>
				<th>수량</th>
				<td><input type="text" name="" id="" value=""/> (개)</td>
			</tr>		
			<tr>
				<th>상품상태</th>
				<td>
					<input type="checkbox" name="" id="" value=""/>이벤트상품
					<input type="checkbox" name="" id="" value=""/>추천상품
					<input type="checkbox" name="" id="" value=""/>인기상품
				</td>
			</tr>
			</tbody>
		</table>
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th>이미지</th>
				<td colspan="4">
					<input type="file" name="" id="" value=""/>
					[파일업로드]
				</td>
			</tr>
			<tr>
				<td>섬네일</td>
				<td>파일명</td>
				<td>용량</td>
				<td>등록일</td>
				<td>기능</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td><img src="" width="30px" height="30px"/></td>
				<td>dkdkdkdkddk Test.jsp</td>
				<td>xxxxx</td>
				<td>xxxx-xx-xx</td>
				<td>[삭제]</td>
			</tr>
			</tbody>
			
			<tfoot>
			</tfoot>
		</table>
<!-- 		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<td colspan="2">태그명
					<select>
						<option>태그1</option>
						<option>태그2</option>
						<option>태그3</option>
					</select>
					[추가]
				</td>
			</tr>
			<tr>
				<th>태그명</th>
				<th>기능</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>태그1</td>
				<td>[삭제]</td>
			</tr>
			</tbody>
		</table>	 -->
		<table width="100%" border="1" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<td colspan="3">옵션
					<select>
						<option>옵션1</option>
						<option>옵션2</option>
						<option>옵션3</option>
					</select>
					<input type="text" name="" id="" value=""/>
					[추가]
				</td>
			</tr>
			<tr>
				<th>옵션</th>
				<th>내용</th>
				<th>기능</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>색상</td>
				<td>빨강</td>
				<td>[삭제]</td>
			</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="center">
						[닫기]
						[수정완료]
					</td>
				</tr>
			</tfoot>
		</table>
		</form>
	</div>
	<!-- 수정 페이지 등록 -->	
	
		
	<!-- =============================================== content 끝 -->
	<!-- =============================================== footer 시작 -->
	<!-- =============================================== footer 끝 -->	
</body>
</html>